<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>4.列表的排序</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 1">年龄升序</button>
        <button @click="sortType = 2">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(person,index) in filterPersonList" :key="person.id">
                {{person.name}} -- {{person.age}} --{{person.sex}}
            </li>
        </ul>

        <hr>


        <script type="text/javascript">
            //  用 computed 实现
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        sortType: 0,
                        keyWord: '',
                        personList: [
                            { id: '001', name: '马冬梅', age: 25, sex: '女' },
                            { id: '002', name: '周冬雨', age: 27, sex: '女' },
                            { id: '003', name: '周杰伦', age: 18, sex: '男' },
                            { id: '004', name: '温兆伦', age: 15, sex: '男' }
                        ]
                    }
                },
                computed: {
                    filterPersonList() {
                        const list = this.personList.filter(p => {
                            return p.name.indexOf(this.keyWord) !== -1
                        });
                        if (this.sortType) {
                            list.sort((p1, p2) => {
                                return this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age
                            })
                        }
                        return list;
                    }
                },
            });
        </script>

</body>

</html>